<template>
  <div>
    <!--条件查询-->
    <el-row>
      <el-col :span="24">
        <el-card header="专辑列表">

          <!--输入框-->
          <el-form :inline="true">
            <el-form-item label="专辑名称">
              <el-input
                  v-model="collName"
                  placeholder="专辑名称"
                  clearable>
              </el-input>
            </el-form-item>

            <!--搜索-->
            <el-form-item>
              <el-button icon="el-icon-search"  @click="getCollectionList">搜索</el-button>
            </el-form-item>
          </el-form>

        </el-card>
      </el-col>
    </el-row>


    <el-row>
      <el-col span="24">
        <el-card>
          <el-header style="background-color: #ffffff">
            <el-button icon="el-icon-circle-plus-outline" @click="insertCollection">添加专辑</el-button>
          </el-header>
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column
                type="index"
                width="100"
                label="编号" sortable>
            </el-table-column>

            <el-table-column
                width="150"
                label="图片">
              <template v-slot="scope">
                <img :src="scope.row.collPhoto" alt="" width="90" height="90" style="border-radius: 10px" @click="updatePhoto(scope.row)">
              </template>
            </el-table-column>

            <el-table-column
                prop=""
                width="150"
                label="详情信息">
              <template slot-scope="scope">
                <el-button size="mini" @click="getCollectionInfo(scope.row)">详情</el-button>
              </template>
            </el-table-column>

            <el-table-column
                prop="collName"
                label="专辑名">
            </el-table-column>

            <el-table-column
                width="100"
                prop="singerName"
                label="专辑作者">
            </el-table-column>

            <el-table-column
                prop="collDate"
                label="发布日期">
            </el-table-column>


            <el-table-column label="操作" width="230">
              <template slot-scope="scope">
                <el-button
                    icon="el-icon-edit"
                    size="mini"
                    @click="handleEdit(scope.row)">编辑</el-button>
                <el-popconfirm
                    :title="('确认删除'+scope.row.collName+'吗?')"
                    @confirm="handleDelete(scope.row)"
                >
                  <el-button
                      style="margin-left: 20px"
                      icon="el-icon-delete"
                      size="mini"
                      type="danger"  slot="reference">删除</el-button>
                </el-popconfirm>

              </template>
            </el-table-column>

          </el-table>

        </el-card>
      </el-col>
    </el-row>

    <!--分页-->
    <div class="block">
      <span class="demonstration">显示总数</span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="current"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="用户图片编辑" :visible.sync="dialog.dialogPhoto">
      <el-upload
          class="upload-demo"
          drag
          action="http://124.221.244.228:8089/upload"
          multiple
          :on-success="onSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>

    <!--详情-->
    <el-dialog title="歌单详情" :visible.sync="dialog.dialogInfo" >
      <el-button type="primary"  size="mini" style="margin: 20px 20px" @click="getCollSongs">展示专辑歌曲</el-button>
      <el-descriptions class="margin-top" :column="4" direction="vertical" border>
        <el-descriptions-item label="专辑图片">
          <img :src="collection.collPhoto" style="height: 70px;width: 70px;border-radius: 10px">
        </el-descriptions-item>
        <el-descriptions-item label="专辑名">{{ collection.collName }}</el-descriptions-item>
        <el-descriptions-item label="作者">{{ collection.singerName }}</el-descriptions-item>
        <el-descriptions-item label="发布日期">{{ collection.collDate }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog title="专辑歌曲" :visible.sync="dialog.dialogSongInfo">
      <el-table
          :data="listSong"
          style="width: 100%">

        <el-table-column
            type="index"
            label="编号" sortable>
        </el-table-column>
        <el-table-column
            prop="songName"
            label="歌名" sortable>
        </el-table-column>
        <el-table-column
            prop="singerName"
            label="作者" sortable>
        </el-table-column>
        <el-table-column
            prop="songIntroduce"
            label="专辑名" sortable>
        </el-table-column>

      </el-table>
    </el-dialog>

    <el-dialog title="歌单信息编辑" :visible.sync="dialog.dialogUpdate">
      <el-form>
        <el-form-item label="专辑名" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="collection.collName"></el-input>
        </el-form-item>
        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="collection.singerName" disabled></el-input>
        </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="专辑发布日期">
            <el-date-picker
                v-model="collection.collDate"
                type="date"
                placeholder="选择日期"
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        <el-form-item label="专辑歌曲" :label-width="formLabelWidth">
          <el-button type="primary" size="mini" @click="toSongListIncoll">展示歌单歌曲</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogUpdate = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="歌单歌曲" :visible.sync="dialog.dialogListInfo" width="700px">
      <el-button type="primary" @click="getNUllSong">添加歌曲</el-button>
      <el-table :data="listSong">
        <el-table-column type="index"></el-table-column>
        <el-table-column property="songName" label="歌名" width="150"></el-table-column>
        <el-table-column property="songIntroduce" label="歌曲专辑" width="200"></el-table-column>
        <el-table-column property="singerName" label="作者"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                icon="el-icon-delete"
                size="mini"
                type="danger"
                @click="deleteSongInColl(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--添加的歌单-->
    <el-dialog title="未有专辑的歌曲" :visible.sync="dialog.dialogCollIdNull">
      <el-table :data="songNUll">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column property="songName" label="歌名"></el-table-column>
        <el-table-column property="singerName" label="作者"></el-table-column>
        <el-table-column  label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="insertColl(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--添加-->
    <el-dialog title="歌单信息编辑" :visible.sync="dialog.dialogInsert">

      <el-alert
          title="添加步骤"
          type="error"
          description="先加入歌名,歌曲类型,作者(如果没有作者请先加入作者),在音乐详情里面上传图片和链接,在专辑里面添加音乐到专辑"
          style="margin: 30px 0px">
      </el-alert>

      <el-form>
        <el-form-item label="专辑名" :label-width="formLabelWidth">
          <el-input autocomplete="off" v-model="collectionInfo.collName"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="专辑发布日期">
          <el-date-picker
              v-model="collectionInfo.collDate"
              type="date"
              placeholder="选择日期"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-button type="primary" size="mini" style="margin-left: 30px" @click="updateDialogInsertSinger">添加作者</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogUpdate = false">取 消</el-button>
        <el-button type="primary" @click="submitInsert">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择作者" :visible.sync="dialog.dialogInsertSinger">
      <el-card header="歌手列表">
        <!--输入框-->
        <el-form :inline="true">
          <el-form-item label="歌单名称">
            <el-input
                v-model="singerName"
                placeholder="歌手名字"
                clearable>
            </el-input>
          </el-form-item>

          <!--搜索-->
          <el-form-item>
            <el-button icon="el-icon-search" @click="getSingerNameToInsert">搜索</el-button>
          </el-form-item>
        </el-form>

        <el-table
            :data="listSinger"
            style="width: 100%">

          <el-table-column
              type="index"
              label="编号" sortable>
          </el-table-column>
          <el-table-column
              prop="singerName"
              label="歌手名" sortable>
          </el-table-column>
          <el-table-column
              prop="singerSex"
              label="歌手性别" sortable>
          </el-table-column>
          <el-table-column
              label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="getToInsert(scope.row)">添加</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      collName: '',
      current: 1,
      size: 5,
      tableData:[],
      total:0,
      dialog:{
        dialogPhoto:false,
        dialogInfo:false,
        dialogSongInfo:false,
        dialogInsert:false,
        dialogInsertSinger:false,
        dialogUpdate:false,
        dialogListInfo:false,
        dialogCollIdNull:false
      },
      collection:{}, //当前专辑
      collId:0, //专辑Id
      listSong:[], //查询到专辑歌曲
      formLabelWidth: "120px", //编辑页面距离
      collectionInfo:{}, //新增的专辑对象
      listSinger:[] , //作者
      singerName:'',//作者姓名
      singer:{} ,//加入的作者
      songNUll:[] ,//CollId为空的歌曲
    }
  },
  created() {
    this.getCollectionList()
  },
  methods:{
    getCollectionList(){
      this.$http.get("/coll/collectionList", {
        params: {
          current: this.current,
          size: this.size,
          collName: this.collName,
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total

      })
    },
    updatePhoto(row){
      this.collId = row.collId
      this.dialog.dialogPhoto = true
    },
    open2(){
      this.$message({
        message: '修改成功',
        type: 'success'
      });
    },
    open3() {
      this.$message({
        message: '修改失败',
        type: 'warning'
      });
    },
    onSuccess(res){
      console.log(res)
      this.collPhoto = res.data
      this.$http.get("/coll/updatePhoto",{
        params:{
          collPhoto:this.collPhoto,
          collId:this.collId
        }
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },1000)

        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    },
    handleDelete(row){
      this.$http.get("/coll/deleteCollByCollId",{
        params:{
          collId:row.collId
        }
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },1000)

        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    },
    handleSizeChange(res){

    },
    handleCurrentChange(res){
      this.current = res
      this.getCollectionList()
    },
    getCollectionInfo(row){
      this.dialog.dialogInfo = true
      this.collId = row.collId
      this.$http.get("/coll/getCollectionInfo",{
        params:{
          collId : row.collId
        }
      }).then(res=>{
        console.log(res)
        this.collection = res.data.data
      })
    },
    getCollSongs(){
      this.dialog.dialogSongInfo = true
      this.$http.get("/coll/findListSongs",{
        params:{
          collId:this.collId
        }
      }).then(res=>{
        console.log(res)
        this.listSong = res.data.data
      })
    },
    insertCollection(){
      this.dialog.dialogInsert = true
    },
    getToInsert(row) {
      console.log(row)
      this.singer.singerName = row.singerName
      this.singer.singerId = row.singerId
      this.dialog.dialogInsertSinger = false
    },
    getSingerNameToInsert() {
      this.$http.get("/singer/findSingerByName", {
        params: {
          singerName: this.singerName
        }
      }).then(res => {
        console.log(res)
        this.listSinger = res.data.data
      })
    },
    updateDialogInsertSinger() {
      this.dialog.dialogInsertSinger = true
    },
    submitInsert(){
      this.$http.get("/coll/insertColl",{
        params:{
          singerId:this.singer.singerId,
          singerName:this.singer.singerName,
          collDate:this.collectionInfo.collDate,
          collName:this.collectionInfo.collName
        }
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },1000)

        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    },
    handleEdit(row){
      this.collId = row.collId
      this.collName = row.collName
      this.$http.get("/coll/getCollectionInfo",{
        params:{
          collId:row.collId
        }
      }).then(res=>{
        console.log(res)
        this.collection = res.data.data
      })
      this.dialog.dialogUpdate = true
    },
    toSongListIncoll(){
      this.dialog.dialogListInfo = true
      this.$http.get("/coll/findListSongs",{
        params:{
          collId:this.collId
        }
      }).then(res=>{
        this.listSong = res.data.data
      })
    },
    deleteSongInColl(row){
      this.$http.get("/coll/deleteSongById",{
        params:{
          songId:row.songId
        }
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },1000)

        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    },
    getNUllSong(){
      this.dialog.dialogCollIdNull = true
      this.$http.get("/coll/findCollIdNULL").then(res=>{
        console.log(res)
        this.songNUll = res.data.data
      })
    },
    insertColl(row){

      this.$http.get("/coll/insertColl2",{
        params:{
          collId:this.collId,
          collName:this.collName,
          songId:row.songId
        }
      }).then(res=>{
        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    },
    submitUpdate(){
      this.$http.get("/coll/updateColl",{
        params:{
          collName:this.collection.collName,
          singerName:this.collection.singerName,
          collDate:this.collection.collDate,
          collId:this.collId
        }
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },400)
        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    }

  }
}
</script>

<style scoped>
.block{
  margin-top: 20px;
  text-align: center;
}
</style>